<template>
    <!--分页组件-->
    <ul class="pagination" >
        <li :class="current == 1 ? 'notAllowed' : ''" @click="prevPage" ><a >上一页</a></li>
        <li v-for="n in pages" @click="goto(n)" :class="{'active':current == n}">
            <a  >{{n}}</a>
        </li>
        <li :class="allpage == current ? 'notAllowed' : ''" @click="nextPage"><a >下一页</a></li>
    </ul>
</template>

<script type="application/ecmascript">
    export default {
        name: 'pager',//分页组件
        data(){
            return{
                showItem:4,
            }
        },
        props: ['current','allpage'],//接收父组件传过来的变量
        computed:{
            pages:function(){
                var pag = [];
                    if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                        //总页数和要显示的条数那个大就显示多少条
                        var i = Math.min(this.showItem,this.allpage);
                        while(i){
                            pag.unshift(i--);
                        }
                    }else{ //当前页数大于显示页数了
                        var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                            i = this.showItem;
                        if( middle >  (this.allpage - this.showItem)  ){
                            middle = (this.allpage - this.showItem) + 1
                        }
                        while(i--){
                            pag.push( middle++ );
                        }
                }
                return pag
            }
        },
        methods:{
            goto:function(index){
                if(index == this.current) return;
//                this.current = index;
                this.$emit('goto',index);//将点击事件传到父组件
            },
            nextPage:function () {//下一页
                if(this.current == this.allpage) return;
                let index = this.current;
                index =  parseInt(index) + 1;
                this.goto(index);
            },
            prevPage:function () {//
                 if(this.current == 1) return;
                let index = this.current;
                index =  parseInt(index) - 1;
                this.goto(index);
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    li{
        list-style:none;
    }
    a{
        text-decoration:none;
    }
    .pagination {
        position: relative;
        cursor: pointer;
    }

    .pagination li{
        display: inline-block;
        margin:0 5px;
    }
    .pagination li a{
        padding:.5rem 1rem;
        display:inline-block;
        border:1px solid #ddd;
        background:#ffffff;
        color:#2a3542;
    }
    .pagination li a:hover{
        background:#ffffff;
        color: #2ea5f8;

    }
    .pagination li.active a{
        background:#2ea5f8;
        color:#ffffff;
    }

    .pagination li.notAllowed a{
        background:#eef1f6;
        color:#7d7e80;
        cursor: not-allowed;
    }


</style>
